<template>
    <div class="root">
        <input type="text" v-model="city" class="input" placeholder="输入城市">
        <button  class="custom-button" @click="searchHandle()">确认</button>
    </div>
</template>
<script>
export default{
    data(){
        return{
            city: '' // 初始化 city 为空字符串，而不是 '输入城市'
        }
    },
    methods:{
        searchHandle(){
            //获取输入的城市，打印出来
            const x=this.city
            console.log(x)
            //把获取到的城市传给父组件rightTop
            this.$emit('send-city',x);
        }
    }
}
</script>
<style scoped>
.input{
    color: black; 
    width: 120px;
    height: 30px; /* 添加高度设置，你可以根据需要调整 */
    padding: 5px; /* 添加内边距，让输入内容不紧贴边框 */
    box-sizing: border-box; /* 使宽度包含内边距和边框 */
    /* margin-top: -200px; */
    background:transparent;
    border:white 1px solid;

}
.root{
    /* position: absolute; */
    /* border: white 1px solid; */
    margin-top: -245px;
    width: 200px;
    margin-left: 240px;
}
.custom-button{
    color: black;
    margin-left: 10px;
    margin-top: 3px;
}
</style>